<template>
    <i-form :model="formValidate" ref="formValidate" :rules="ruleValidate">
        <i-row class="row">
            <i-col  class="text-right col-left" span="3">
                <h4>基本信息</h4>
            </i-col>
            <i-col class="col-right" span="12" offset="1">
                <i-form-item label="选择分类：">
                    <i-cascader
                        :data="categoryList"
                        trigger="hover"
                        v-model="formValidate.categoryValue">
                    </i-cascader>
                </i-form-item>
                <i-form-item label="商品分组：">
                    <i-row>
                        <i-col span="15">
                            <i-select
                                :data="categoryGroup"
                                multiple
                                v-model="formValidate.groupValue">
                                <i-option
                                    v-for="item in categoryGroup"
                                    :value="item.label"
                                    :key="item.value">
                                </i-option>
                            </i-select>
                        </i-col>
                        <i-col span="8" offset="1">
                            <a>刷新</a>
                            <a class="ml6">新建分组</a>
                        </i-col>
                    </i-row>
                </i-form-item>
                <i-form-item label="商品类型：">
                    <i-radio-group v-model="formValidate.categoryType">
                        <i-radio label="实体商品"></i-radio>
                        <i-radio label="虚拟商品"></i-radio>
                        <i-radio label="电子卡券"></i-radio>
                    </i-radio-group>
                </i-form-item>
                <i-form-item label="预售设置：">
                    <i-checkbox v-model="formValidate.bPreSaleType">
                            <span>预售商品</span>
                    </i-checkbox>
                </i-form-item>
            </i-col>
        </i-row>
        <i-row class="row margin-top">
            <i-col  class="text-right col-left" span="3">
                <h4>库存/规格</h4>
            </i-col>
            <i-col class="col-right" span="20" offset="1">
                <i-form-item label="商品规格：">
                    <i-row>
                        <i-col span="13">
                            <a @click="addSpecification()"> + 添加规格项目</a>
                        </i-col>
                        <i-col span="23">
                            <i-card 
                                class="margin-top specifition-card"
                                v-for="(item, index) in formValidate.specificationList"
                                :key="index">
                                <p slot="title">
                                    <section>
                                        <i-select
                                            :ref="`specificationSelect${index}`"
                                            v-model="item.specification"
                                            style="width: 250px;"
                                            filterable
                                            :label-in-value="true"
                                            placeholder="点击选择搜索或输入内容回车新增条目"
                                            @keyup.enter.native="enterAddSpec({
                                                index,
                                                ref: `specificationSelect${index}`
                                            })"
                                            @on-change="specSelChange">
                                            <i-option 
                                                v-for="item in specificationList"
                                                :value="item.value"
                                                :key="item.value"
                                                :disabled="item.disabled">{{ item.label }}</i-option>
                                        </i-select>
                                        <i-checkbox
                                            v-if="index === 0"
                                            v-model="item.bSpecificationImg">
                                            添加规格图片
                                        </i-checkbox>
                                    </section>
                                    <section>
                                        <i-icon
                                            class="card__icon-close"
                                            type="ios-close-outline"
                                            size="24"
                                            @click.native="removeSpec(index)">
                                        </i-icon>
                                    </section>
                                </p>
                                <div
                                    class="tag-con"
                                    v-for="(itemTag, tagIndex) in item.tags"
                                    :key="tagIndex">
                                    <i-poptip
                                        placement="bottom"
                                        width="324"
                                        v-model="itemTag.bPoptip"
                                        @on-popper-show="operateUpdateSpecTag({
                                            specIndex: index,
                                            tagIndex,
                                            type: 'poptip'
                                        })">
                                        <i-tag 
                                            class="custom-tag"
                                            closable
                                            @on-close="removeSpecTag({
                                                specIndex: index, 
                                                tagIndex,
                                                tagLabel: itemTag.label
                                            })">
                                            {{itemTag.label}}
                                        </i-tag>
                                        <div slot="content">
                                            <i-input
                                                v-model="itemTag.poptipValue"
                                                style="width:180px;"
                                                @on-enter="operateUpdateSpecTag({
                                                        specIndex: index,
                                                        tagIndex,
                                                        type: 'update'
                                                    })">
                                            </i-input>
                                            <div class="button-group">
                                                <i-button
                                                    type="primary"
                                                    @click="operateUpdateSpecTag({
                                                        specIndex: index,
                                                        tagIndex,
                                                        type: 'update'
                                                    })">
                                                    修改
                                                </i-button>
                                                <i-button
                                                    type="default"
                                                    @click="operateUpdateSpecTag({
                                                        specIndex: index,
                                                        tagIndex,
                                                        bCancel: true
                                                    })">
                                                    取消
                                                </i-button>
                                        </div>
                                        </div>
                                    </i-poptip>
                                    <div 
                                        class="tag__image"
                                        v-if="item.bSpecificationImg"
                                        @click="changeSpecImage({
                                            specIndex: index,
                                            tagIndex
                                        })">
                                        <div class="arrow"></div>
                                        <img :src="itemTag.image" alt="" v-if="itemTag.image">
                                        <i-icon type="ios-plus-empty" size="70" v-else></i-icon>
                                    </div>
                                </div>
                                <i-poptip
                                    v-model="item.bPoptip"
                                    placement="bottom-start"
                                    width="394">
                                    <a v-show="item.specification">+ 添加</a>
                                    <div slot="content">
                                        <i-select 
                                            :ref="`specTagList${index}`"
                                            v-model="item.tagsValue"
                                            style="width:250px;" 
                                            multiple
                                            filterable
                                            placeholder="点击选择搜索或输入内容回车新增条目"
                                            @keyup.enter.native="enterAddSpecTagList({
                                                index, 
                                                ref: `specTagList${index}`})">
                                            <i-option 
                                                v-for="itemTag in item.tagsList"
                                                :value="itemTag.value"
                                                :key="itemTag.value"
                                                :disabled="itemTag.disabled">{{ itemTag.label }}</i-option>
                                        </i-select>
                                        <div class="button-group">
                                            <i-button
                                                type="primary"
                                                @click="confirmSpecTag(index)">
                                                确定
                                            </i-button>
                                            <i-button type="default"
                                                @click="cancelSpecTag(index)">取消</i-button>
                                        </div>
                                    </div>
                                </i-poptip>
                            </i-card>
                        </i-col>
                    </i-row>
                </i-form-item>
                <i-form-item label="商品库存：" v-if="stockAddColumns.length > 0">
                    <sku-table class="sku-table" :columns="stockColumns">
                        <tr
                            v-for="(item, index) in formValidate.stockData"
                            :key="index">
                            <td
                                v-for="(itemAdd, indexAdd) in stockAddColumns"
                                v-if="index % computedColumns[indexAdd] === 0"
                                :rowspan="computedColumns[indexAdd]"
                                :key="itemAdd.value">
                                <div class="ivu-table-cell">
                                    {{ item[itemAdd.value] }}
                                </div>
                            </td>
                            <td>
                                <i-form-item
                                    :prop="'stockData.' + index + '.price'"
                                    :rules="ruleValidate.totalInventory">
                                    <div class="ivu-table-cell">
                                        <i-input
                                            number
                                            size="small"
                                            v-model="item.price"
                                            placeholder="填写价格">
                                        </i-input>
                                    </div>
                                </i-form-item>
                            </td>
                            <td>
                                <i-form-item
                                    :prop="'stockData.' + index + '.stock'"
                                    :rules="ruleValidate.totalInventory">
                                    <div class="ivu-table-cell">
                                        <i-input
                                            number
                                            size="small"
                                            v-model="item.stock"
                                            placeholder="填写库存">
                                        </i-input>
                                    </div>
                                </i-form-item>
                            </td>
                            <td>
                                <i-form-item
                                    :prop="'stockData.' + index + '.costPrice'"
                                    :rules="ruleValidate.totalInventory">
                                    <div class="ivu-table-cell">
                                        <i-input
                                            number
                                            size="small"
                                            v-model="item.costPrice"
                                            placeholder="填写成本价">
                                        </i-input>
                                    </div>
                                </i-form-item>
                            </td>
                            <td>
                                <i-form-item>
                                    <div class="ivu-table-cell">{{ item.sale }}</div>
                                </i-form-item>
                            </td>
                        </tr>
                    </sku-table>
                </i-form-item>
                <i-row>
                    <i-col span="16">
                        <i-form-item label="总库存：" prop="totalInventory">
                            <i-row>
                                <i-col span="13">
                                    <i-input
                                        number
                                        v-model="formValidate.totalInventory"
                                        placeholder="请输入"
                                        :disabled="stockColumns.length > 0">
                                    </i-input>
                                </i-col>
                                <i-col span="10" offset="1">
                                    <i-checkbox v-model="formValidate.bInventory">
                                        <span>页面不显示商品库存</span>
                                    </i-checkbox>
                                </i-col>
                            </i-row>
                        </i-form-item>
                    </i-col>
                </i-row>
            </i-col>
        </i-row>
        <i-row class="row margin-top">
            <i-col  class="text-right col-left" span="3">
                <h4>商品信息</h4>
            </i-col>
            <i-col class="col-right" span="12" offset="1">
                <i-form-item label="商品名称：" prop="productName">
                    <i-input
                        placeholder="请输入商品名称"
                        v-model="formValidate.productName">
                    </i-input>
                </i-form-item>
                <i-form-item 
                    label="价格(￥)："
                    prop="productPrice">
                    <i-row>
                        <i-col span="7">
                            <i-input
                                v-model="formValidate.productPrice"
                                placeholder="价格">
                            </i-input>
                        </i-col>
                        <i-col span="7" offset="1">
                            <i-input placeholder="原价"></i-input>
                        </i-col>
                        <i-col span="7" offset="1">
                            <i-input placeholder="成本价"></i-input>
                        </i-col>
                    </i-row>
                </i-form-item>
                    <i-form-item label="商品图片：" prop="goodsImg">
                        <draggable v-model="formValidate.goodsImg">
                            <div
                                class="demo-upload-list"
                                v-for="(item, index) in formValidate.goodsImg"
                                :title="item.title">
                                <i-icon
                                    class="remove"
                                    type="android-close"
                                    @click.native="removeGoodsImg(index)"
                                    title="移除">
                                </i-icon>
                                <img :src="item.img" :alt="item.title" />
                            </div>
                    </draggable>
                    <div
                        class="plus-button ivu-upload ivu-upload-drag"
                        @click="addGoodsImg()"
                        v-show="formValidate.goodsImg.length < formValidate.goodsLimit">
                        <i-icon type="plus"></i-icon>
                    </div>
                    <p class="remark">拖拽进行排序，主图默认为第一张</p>
                </i-form-item>
                <i-form-item label="主图视频：">
                    <div
                        class="plus-button ivu-upload ivu-upload-drag">
                        <i-icon type="plus"></i-icon>
                    </div>
                </i-form-item>
            </i-col>
        </i-row>
        <i-row class="row margin-top">
            <i-col class="text-right col-left" span="3">
                <h4>物流/其他</h4>
            </i-col>
            <i-col class="col-right" span="12" offset="1">
                <i-form-item
                    label="运费设置：">
                    <i-radio-group
                        v-model="formValidate.freightSetting"
                        @on-change="changeFreight()">
                        <i-radio label="固定运费"></i-radio>
                        <i-radio label="运费模板"></i-radio>
                    </i-radio-group>
                    <div>
                        <i-form-item
                            prop="fixedFreight"
                            v-if="formValidate.freightSetting === '固定运费'">
                            <i-input
                                v-model="formValidate.fixedFreight"
                                style="width:240px; display: block;">
                            </i-input>
                        </i-form-item>
                    </div>
                    <div>
                        <i-row v-if="formValidate.freightSetting === '运费模板'">
                            <i-col span="15">
                                <i-form-item prop="freightSelect">
                                    <i-select 
                                        v-model="formValidate.freightSelect"
                                        filterable
                                        placeholder="请输入关键词"
                                        style="display:block;">
                                    </i-select>
                                </i-form-item>
                            </i-col>
                            <i-col span="8" offset="1">
                                <a>刷新</a>
                                <a class="ml6">新建运费模板</a>
                            </i-col>
                        </i-row>
                    </div>
                </i-form-item>
                <i-form-item label="每人限购：">
                    <i-input v-model="formValidate.limitBuy"></i-input>
                    <p class="remark">0代表无限制</p>
                </i-form-item>
                <i-form-item label="购买权限：">
                    <i-select 
                        v-model="formValidate.buyingPower"
                        filterable
                        placeholder="请输入关键词"
                        style="width:240px; display:block;">
                    </i-select>
                    <p class="remark">不选择代表所有用户</p>
                </i-form-item>
                <i-form-item label="开售时间：">
                    <i-radio-group v-model="formValidate.sellingTimeSel">
                        <i-radio label="立即开售"></i-radio>
                        <i-radio label="定时开售"></i-radio>
                    </i-radio-group>
                    <i-form-item
                        v-if="formValidate.sellingTimeSel === '定时开售'"
                        prop="sellingDatepicker">
                        <i-date-picker
                            type="datetime"
                            placement="top"
                            placeholder="选择日期和时间"
                            v-model="formValidate.sellingDatepicker">
                        </i-date-picker>
                    </i-form-item>
                </i-form-item>
                <i-form-item label="会员折扣：">
                    <i-checkbox v-model="formValidate.memberDiscount">参加会员折扣</i-checkbox>
                </i-form-item>
            </i-col>
        </i-row>
        <slot></slot>
    </i-form>
</template>
<script>
// mapActions
import { mapActions, mapState } from 'vuex'

// sku table
import SkuTable from './SkuTable'
import PictureModal from '@/admin/components/PictureModal'

// draggable
import Draggable from 'vuedraggable'

// 笛卡尔
import Descarte from '@/utils/descarte'

export default {
    name: 'goods-create',
    components: {
        SkuTable,
        PictureModal,
        Draggable
    },
    data() {
        return {
            /**
             * 当前steps的状态
             *
             * @default 2
             * @type {Number}
             */
            stepCurrent: 0,
            /**
             * step 数组列表
             *
             * @type {Array.<Object>}
             */
            stepList: [
                {
                    /**
                     * 步骤名称
                     *
                     * @type {String}
                     */
                    title: '基本信息'
                },
                {
                    title: '商品详情'
                },
                {
                    title: '商品关联'
                }
            ],
            /**
             * 商品分类列表
             *
             * @type {Array.<Object>}
             */
            categoryList: [
                {
                    value: 'beijing',
                    label: '北京',
                    children: [
                        {
                            value: 'gugong',
                            label: '故宫'
                        },
                        {
                            value: 'tiantan',
                            label: '天坛'
                        },
                        {
                            value: 'wangfujing',
                            label: '王府井'
                        }
                    ]
                },
                {
                    value: 'jiangsu',
                    label: '江苏',
                    children: [
                        {
                            value: 'nanjing',
                            label: '南京',
                            children: [
                                {
                                    value: 'fuzimiao',
                                    label: '夫子庙'
                                }
                            ]
                        },
                        {
                            value: 'suzhou',
                            label: '苏州',
                            children: [
                                {
                                    value: 'zhuozhengyuan',
                                    label: '拙政园'
                                },
                                {
                                    value: 'shizilin',
                                    label: '狮子林'
                                }
                            ]
                        }
                    ]
                }
            ],
            /**
             * 商品分组
             *
             * @type {Array.<Object>}
             */
            categoryGroup: [
                {
                    label: '颜色',
                    value: 'color'
                },
                {
                    label: '尺寸',
                    value: 'size'
                },
                {
                    label: '种类',
                    value: 'type'
                },
                {
                    label: '尺码',
                    value: 'cm'
                }
            ],
            /**
             * 商品规格的属性值数量
             * 如果新增的属性值得时，其值为0就重新渲染整个 table 表格 包括其值
             *
             * @default 0
             * @type {String}
             */
            tagsLen: 0,
            /**
             * 合并单元格 计算数值
             */
            computedColumns: [],
            /**
             * 计算没个属性对应属性值的个数
             */
            aTagsLen: [],
            /**
             * 商品规格
             *
             * @type {Array.<Object>}
             */
            specificationList: [
                {
                    label: '颜色',
                    value: 'color'
                },
                {
                    label: '尺寸',
                    value: 'size'
                },
                {
                    label: '种类',
                    value: 'type'
                },
                {
                    label: '尺码',
                    value: 'cm'
                }
            ],
            /**
             * specification 商品库存表格头部title
             *
             * @type {String}
             */
            stockColumns: [],
            stockAddColumns: [],
            stockColumnsDefault: [
                {
                    label: '价格（￥)',
                    key: 'price'
                },
                {
                    label: '库存',
                    key: 'stock'
                },
                {
                    label: '成本价',
                    key: 'costPrice'
                },
                {
                    label: '销量',
                    key: 'sale'
                }
            ],
            /**
             * specification 商品库存表格内容
             *
             * @type {String}
             */
            stockData: [],
            /**
             * 验证
             *
             * @type {Object}
             */
            ruleValidate: {
                /**
                 * 库存验证
                 */
                totalInventory: [
                    { required: true, message: '不能为空' },
                    { type: 'number', message: '必须为数字' }
                ],
                /**
                 * 商品名称验证
                 */
                productName: [{ required: true, message: '商品名不能为空' }],
                /**
                 * 价格验证
                 */
                productPrice: [{ required: true, message: '价格不能为空' }],
                /**
                 * 图片是否上传
                 */
                goodsImg: [{ required: true, message: '至少上传一张图片' }],
                /**
                 * 开售时间 - 定时开始时间设定
                 */
                sellingDatepicker: [
                    { required: true, message: '请选择需要设定的开售时间' }
                ],
                /**
                 * 运费设置  固定运费 验证规范
                 */
                fixedFreight: [{ required: true, message: '请填写固定运费的价格' }],
                /**
                 * 运费设置  运费模板 验证规范
                 */
                freightSelect: [{ required: true, message: '请选择运费模板' }]
            },
            /**
             * form表单
             *
             * @type {Object}
             */
            formValidate: {
                /**
                 * 库存 数据
                 */
                stockData: [],
                /**
                 * 图片上传列表
                 *
                 * @type {Array}
                 */
                goodsImg: [
                    {
                        title: 'a42bdcc1178e62b4694c830f028db5c0',
                        img:
                            'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
                    },
                    {
                        title: 'bc7521e033abdd1e92222d733590f104',
                        img:
                            'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
                    }
                ],
                goodsLimit: 9,
                /**
                 * 商品规格选中值
                 *
                 * @type {Array.<String>}
                 */
                specification: [],
                /**
                 * 商品规格选中值
                 *
                 * @type {Array.<String>}
                 */
                specificationList: [],
                /**
                 * 添加规格图片
                 *
                 * @default false
                 * @type {Boolean}
                 */
                bAddSpecificationImg: false,
                /**
                 * 预售设置
                 *
                 * @default false
                 * @type {Boolean}
                 */
                bPreSaleType: false,
                /**
                 * 商品类型单选按钮选择
                 *
                 * @type {String}
                 */
                categoryType: '实体商品',
                /**
                 * 分类列表选中的值
                 *
                 * @type {Array.<String>}
                 */
                categoryValue: [],
                /**
                 * 分组列表选中的值
                 *
                 * @type {Array.<String>}
                 */
                groupValue: [],
                /**
                 * 商品库存数量
                 *
                 * @type {Number}
                 */
                totalInventory: '',
                /**
                 * 页面是否商品库存
                 *
                 * @default false
                 * @type {Boolean}
                 */
                bInventory: false,
                /**
                 * 商品名称
                 *
                 * @default ''
                 * @type {String}
                 */
                productName: '',
                /**
                 * 商品价格
                 *
                 * @default ''
                 * @type {String}
                 */
                productPrice: '',
                /**
                 * 运费设置选项
                 *
                 * @default '固定运费'
                 * @type {String}
                 */
                freightSetting: '固定运费',
                /**
                 * 固定运费
                 *
                 * @default '0.00'
                 * @type {String}
                 */
                fixedFreight: '0.00',
                /**
                 * 运费模板集合
                 *
                 * @default ''
                 * @type {Array.<Object>}
                 */
                freightSelect: [],
                /**
                 * 限购
                 *
                 * @default '0'
                 * @type {String}
                 */
                limitBuy: '0',
                /**
                 * 购买权限
                 *
                 * @default
                 * @type {Array.<Object>}
                 */
                buyingPower: [],
                /**
                 * 开售时间选项
                 *
                 * @default '立即开售'
                 * @type {String}
                 */
                sellingTimeSel: '立即开售',
                /**
                 * 会员折扣
                 *
                 * @default false
                 * @type {Boolean}
                 */
                memberDiscount: false
            }
        }
    },
    computed: {
        ...mapState('pictureModal', ['goodsCreateStep1'])
    },
    mounted() {},
    methods: {
        ...mapActions(['isModal']),
        /**
         * 添加商品图片
         *
         *@param {Number} limit - 限制图片个数 默认 为 9
         */
        addGoodsImg() {
            let formGoodsImg = this.formValidate.goodsImg
            let formGoodsImgLen = formGoodsImg.length
            this.isModal({
                bShow: true,
                modalKey: 'bPictureModal',
                limit: this.formValidate.goodsLimit - formGoodsImgLen,
                changeInfo: {
                    page: 'goods/create',
                    attr: 'goodsImg'
                }
            })
        },
        /**
         * 查看goods img大图
         *
         * @param {Number} index - goodsImg 索引
         */
        seeGoodsImg() {},
        /**
         * 删除goods img
         *
         * @param {Number} index - goodsImg 索引
         */
        removeGoodsImg(index) {
            this.formValidate.goodsImg.splice(index, 1)
        },
        /**
         * 修改库存规格的属性图片
         *
         * @param {Number} specIndex - 规格索引
         * @param {Number} tagIndex - 属性值索引
         */
        changeSpecImage({ specIndex, tagIndex }) {
            this.isModal({
                bShow: true,
                modalKey: 'bPictureModal',
                limit: 1,
                changeInfo: {
                    page: 'goods/create',
                    attr: 'specificationList',
                    specIndex,
                    tagIndex
                }
            })
        },
        /**
         * 当select 为多选的时候限制其个数
         *
         * @param {String} list - 需要处理的选项列表
         * @param {String} selList - 当前选中的列表值
         * @param {Number} number - 限制的个数

        selectMultipleLimit({ list, selList, number }) {
            let listLen = list.length
            let selListLen = selList.length
            if (selListLen >= number) {
                for (let i = 0; i < listLen; i++) {
                    this.$set(list[i], 'isDisabled', true)
                }
                list.map(item => {
                    if (selList.indexOf(item.value) !== -1) {
                        item.isDisabled = false
                    }
                })
            } else {
                for (let i = 0; i < listLen; i++) {
                    this.$set(list[i], 'isDisabled', false)
                }
            }
        },
        */
        /**
         * 添加商品规格项目
         *
         * @param {Number} moreNum - 最多可以添加属性规格的个数   {可自行修改}
         */
        addSpecification(moreNum) {
            let formSpecList = this.formValidate.specificationList
            let formSpecListLen = formSpecList.length
            // let specificationListLen = this.specificationList.length
            if (!moreNum) {
                // 如果没有传递数量默认为3
                moreNum = 3
            }
            if (
                formSpecListLen < moreNum
                // && formSpecListLen < specificationListLen
            ) {
                // 添加属性规格不能超过 3个 与 可供选择的属性规格个数
                this.formValidate.specificationList.push({
                    /**
                     * 当前属于哪个规格项目睡醒
                     * @type {String}
                     */
                    specification: '',
                    /**
                     * 当前poptip是否显示
                     * @default false
                     * @type {Boolean}
                     */
                    bPoptip: false,
                    /**
                     * 是否添加规格图片
                     * @default false
                     * @type {Boolean}
                     */
                    bSpecificationImg: false,
                    /**
                     * 已经选择的tags属性值，多选
                     * @type {Array.<String>}
                     */
                    tagsValue: [],
                    /**
                     * 可选择的tags属性列表
                     * @type {Array.<Object>}
                     */
                    tagsList: [],
                    /**
                     * 选择确认后的 tags 属性标签
                     * @type {Array.<Object>} 包含 label - 属性名  image - 属性图片
                     */
                    tags: []
                })
            } else {
                // let limitNum = moreNum
                // if (specificationListLen < moreNum) {
                //     limitNum = specificationListLen
                // }
                this.$Message.error(`商品规格属性最多可添加 ${moreNum} 个`)
            }
        },
        /**
         * 根据索引值删除商品规格项目
         *
         * @param {Number} index - 当前项目规格的索引值
         */
        removeSpec(index) {
            let formSpecList = this.formValidate.specificationList
            let specListValue = formSpecList[index].specification
            let specList = this.specificationList
            let specListLen = specList.length
            formSpecList.splice(index, 1)
            for (let i = 0; i < specListLen; i++) {
                // 删除属性规格属性是将对应的属性列表中的值设为可选
                if (specList[i].value === specListValue) {
                    specList[i].disabled = false
                    break
                }
            }
            this.resetStockHeader()
            this.resetStockData()
        },
        /**
         * 搜索规格项目 select 组件，如果没有可按回车键新增当前输入的值
         * 并把新输入的值当成当前选项赋值于 select 组件
         *
         * @param {Number} index - 当前项目规格属性项目
         * @param {String} ref - 当前项目规格属性项目 select 的 ref值
         */
        enterAddSpec({ index, ref }) {
            let val = this.$refs[ref][0].query
            if (
                !this.specificationList.find(item => Object.is(item.label, val))
            ) {
                this.specificationList.push({
                    label: val,
                    value: val
                })
                this.$refs[ref][0].query = '' // 清空当前select组件的query 值 以保证下拉能够正确显示
                this.formValidate.specificationList[index].specification = val
            }
        },
        /**
         * 商品规格项目的 select 属性改变时监听其变化，并做出响应的操作
         *
         * @param {Number} index - 当前项目规格的索引值
         */
        specSelChange(value) {
            let formSpecList = this.formValidate.specificationList
            let formSpecListLen = formSpecList.length
            this.isSpecSel()
            this.changeStockListHeader({
                value: value,
                formSpecList,
                formSpecListLen
            })
        },
        /**
         * specificationList 当属性名称改变时更改对应的商品库存 table 的 header 值
         * @param {String} value - select 更改对应的 value（唯一） 值
         */
        changeStockListHeader({ value, formSpecListLen, formSpecList }) {
            let specIndex = 0
            let oldVal = new Map()
            for (let i = 0; i < formSpecListLen; i++) {
                // 根据当前的value找到specificationList的索引值
                if (formSpecList[i].specification === value.value) {
                    specIndex = i
                    break
                }
            }
            if (formSpecList[specIndex].tags.length > 0) {
                let stockColumn = this.stockColumns[specIndex]
                oldVal.set('key', stockColumn.key)
                oldVal.set('label', stockColumn.label)
                // 修商品库存列表的header
                stockColumn.label = value.label
                stockColumn.key = value.value
                this.updateStockDataKey({
                    specIndex,
                    value,
                    oldVal
                })
            }
        },
        /**
         * 修改stock 的 key ，并保留对应的值
         *
         * @param {Number} specIndex
         * @param {Object} value - 商品规格属性改变所获取的 value 值
         * @param {Object} oldVal - 商品规格属性改变所获取的 旧的 value 值
         */
        updateStockDataKey({ specIndex, value, oldVal }) {
            let stockData = this.formValidate.stockData
            let oldKey = oldVal.get('key')
            stockData.forEach(item => {
                let label = item[oldKey]
                this.$delete(item, oldKey)
                this.$set(item, value.value, label)
            })
            this.stockAddColumns.splice(specIndex, 1, {
                label: value.label,
                value: value.value
            })
        },
        /**
         * specification 商品规格属性选项禁用或则启用
         */
        isSpecSel() {
            // 判断是否有重复的属性名称的使用
            let formSpecList = this.formValidate.specificationList
            let specList = this.specificationList
            let specification = [] // 获取规格中已经存在的 select 属性
            formSpecList.forEach(item => {
                specification.push(item.specification)
            })
            specList.forEach(item => {
                if (specification.indexOf(item.value) !== -1) {
                    this.$set(item, 'disabled', true) // 如果已经被选择则禁用该条选项
                } else {
                    this.$set(item, 'disabled', false) // 如果未经被选择则取消禁用选项
                }
            })
        },
        /**
         * 增加商品规格项目的 tagsList 属性列表内容
         * 并把新增加的属性值加入当前选择中
         *
         * @param {Number} index - 当前项目规格属性项目
         * @param {String} ref - 当前项目规格属性项目 tagsList select 的 ref值
         */
        enterAddSpecTagList({ index, ref }) {
            let queryVal = this.$refs[ref][0].query
            let specification = this.formValidate.specificationList[index]
            let tagsList = specification.tagsList
            let tagsValue = specification.tagsValue
            if (
                !tagsList.find(item => Object.is(item.label, queryVal)) &&
                queryVal.replace(/\s/g, '') !== ''
            ) {
                // 如果当前内容不存在已选并且不为空 则添加一条记录
                tagsList.push({
                    label: queryVal,
                    value: queryVal
                })
                this.$refs[ref][0].query = '' // 清空当前文本输入的内容
                tagsValue.push(queryVal) // 当前输入的内容加入 tagsValue
            }
        },
        /**
         * 确认商品规格项目的 tags 属性内容 对应的确认按钮
         *
         * @param {Number} index - 当前项目规格的索引值
         */
        confirmSpecTag(index) {
            this.addSpecTag(index)
        },
        /**
         * 取消增加商品规格项目的 tags 属性内容 对应的取消按钮
         *
         * @param {Number} index - 当前项目规格的索引值
         */
        cancelSpecTag(index) {
            let formSpec = this.formValidate.specificationList[index]
            formSpec.tagsValue = [] // 添加完成清空已有选项内容
            formSpec.bPoptip = false // 添加完成关闭当前poptip
        },

        /**
         * 增加商品规格项目的 tags 属性内容
         *
         * @param {Number} index - 当前项目规格的索引值
         */
        addSpecTag(index) {
            let formSpec = this.formValidate.specificationList[index]
            let tagsValue = formSpec.tagsValue
            let bRepeat = false // 选择的值与已被选择的值是否有重复
            this.tagsLen = formSpec.tags.length // 每次增加属性值前计算属性列表中的值
            let newTagsValue = []
            tagsValue.forEach(item => {
                if (
                    !formSpec.tags.find(itemTag =>
                        Object.is(itemTag.label, item)
                    )
                ) {
                    let tagsListLen = formSpec.tagsList.length
                    let tagsKey = ''
                    for (let i = 0; i < tagsListLen; i++) {
                        // 取得对应 tagsList 的 value 值
                        if (formSpec.tagsList[i].label === item) {
                            tagsKey = formSpec.tagsList[i].value
                            break
                        }
                    }
                    newTagsValue.push({
                        column: formSpec.specification,
                        poptipValue: '',
                        bPoptip: false,
                        label: item,
                        key: tagsKey
                    })
                    // 将选择的值加入 tags 中
                    formSpec.tags.push({
                        /**
                         * 列 key
                         */
                        column: formSpec.specification,
                        /**
                         * tag 属性值 poptip input 绑定的值
                         *
                         * @type {String}
                         * @default ''
                         */
                        poptipValue: '',
                        /**
                         * tag 属性值 poptip 默认隐藏
                         *
                         * @type {Boolean}
                         * @default false
                         */
                        bPoptip: false,
                        /**
                         * tag 属性值 的key
                         *
                         * @type {String}
                         * @default key
                         */
                        key: tagsKey,
                        /**
                         * tag 属性值 的label - 显示的值
                         *
                         * @type {String}
                         * @default key
                         */
                        label: item,
                        /**
                         * tag 属性值 的图片 只有第一个属性 拥有 该值
                         *
                         * @type {String}
                         * @default ‘’
                         */
                        image: ''
                    })
                } else {
                    bRepeat = true
                }
            })
            if (bRepeat) {
                this.$Message.error({
                    content: '已为您筛选重复的属性值',
                    duration: 1.5
                })
            }
            if (tagsValue.length > 0) {
                this.cancelSpecTag(index)
                this.addStockList({
                    specIndex: index,
                    newTagsValue
                })
            }
        },
        /**
         * sku 属性的属性值操作
         *
         * @param {Number} specIndex - 规格属性索引
         * @param {Number} tagIndex - 规格属性值索引
         * @param {String} type - 类型
         */
        operateUpdateSpecTag({ specIndex, tagIndex, type }) {
            let formSpec = this.formValidate.specificationList[specIndex]
            let tags = formSpec.tags
            let tag = tags[tagIndex]
            if (!type) {
                // 关闭当前打开的 poptip
                tag.bPoptip = false
            }
            if (type === 'poptip') {
                // 商品属性值点击修改弹出 poptip 显示时触发 将对应的属性值加到 poptip input 中
                tag.poptipValue = tag.label
            }
            if (type === 'update') {
                // 点击确认修改 sku 属性的属性值
                let oldLabel = tag.label
                if (tag.poptipValue !== tag.label) {
                    // 新的值不等于旧值
                    if (
                        !tags.find(item =>
                            Object.is(item.label, tag.poptipValue)
                        )
                    ) {
                        // 新的值不存在
                        tag.label = tag.poptipValue
                        tag.bPoptip = false
                        this.updateStockDataForTag({
                            key: formSpec.specification,
                            oldLabel,
                            tagLabel: tag.label
                        })
                    } else {
                        this.$Message.error({
                            content: '已为您筛选重复的属性值',
                            duration: 1.5
                        })
                    }
                }
            }
        },
        /**
         * 根据key和属性值是唯一的特性
         * 只需要知道key，旧属性值，新属性值就可以改变对应的属性值
         *
         * @param {Number} key - 当前需要修改的key
         * @param {String} tagLabel - 当前修改的tag label 的属性新值
         * @param {String} olaLabel - 当前需要修改的属性旧值
         */
        updateStockDataForTag({ key, oldLabel, tagLabel }) {
            this.formValidate.stockData.forEach(item => {
                if (item[key] === oldLabel) {
                    item[key] = tagLabel
                }
            })
        },
        /**
         * 获取 select label 的值
         *
         * @param {Array.<Object>} list - select列表
         * @param {String} value - 当前选中的select 对应的值
         * @return {String} 返回 label 值
         */
        getSelectLabel({ list, value }) {
            let len = list.length
            for (let i = 0; i < len; i++) {
                if (list[i].value === value) {
                    return list[i].label
                }
            }
        },
        /**
         * 获取 每个 商品规格属性对应属性值的tags长度
         * 用于计算合并单元格
         *
         * @param {Array.<Object>} formSpecList
         * @param {Number} formSpecListLen
         */
        setComputedColumns() {
            let formSpecList = this.formValidate.specificationList
            let formSpecListLen = formSpecList.length
            let nTagsLen = 0
            this.aTagsLen = []
            for (let i = formSpecListLen - 1; i >= 0; i--) {
                let nTagLen = formSpecList[i].tags.length
                if (nTagLen > 0) {
                    this.aTagsLen.push(nTagLen)
                }
            }
            nTagsLen = this.aTagsLen.length
            this.computedColumns = []
            for (let i = 0; i < nTagsLen; i++) {
                let n = 1
                for (let j = 0; j < i; j++) {
                    n = n * this.aTagsLen[j]
                }
                this.computedColumns.unshift(n)
            }
            this.aTagsLen.reverse()
        },
        /**
         * 根据笛卡尔 返回的数据push一条记录到 stock data list中
         *
         * @param {Array.<Object>} result 每组数据
         */
        pushStockData({ result }) {
            let stock = {
                price: '',
                stock: '',
                constPrice: '',
                sale: 0
            }
            result.forEach(item => {
                // if(item.key === )
                stock[item.column] = item.key
            })
            return stock
        },
        /**
         * 新加一条属性或删除属性时 重置表格数据 生成新的数据
         *
         */
        resetStockData() {
            this.formValidate.stockData = []
            let formSpecList = this.formValidate.specificationList
            let formSpecListLen = formSpecList.length
            this.setComputedColumns()
            let arrs = []
            for (let i = 0; i < formSpecListLen; i++) {
                let tagsLen = formSpecList[i].tags.length
                if (formSpecListLen > 0) {
                    let arr = []
                    for (let j = 0; j < tagsLen; j++) {
                        arr.push({
                            column: formSpecList[i].specification,
                            ...formSpecList[i].tags[j]
                        })
                    }
                    if (arr.length > 0) {
                        arrs.push(arr)
                    }
                }
            }
            let result = Descarte.descartes(arrs)
            for (let i = 0; i < result.length; i++) {
                this.formValidate.stockData.push(
                    this.pushStockData({ result: result[i] })
                )
            }
        },
        /**
         * 新加一条或删除属性时 重置表格header 生成新的数据
         */
        resetStockHeader() {
            let formSpecList = this.formValidate.specificationList
            this.stockColumns = []
            this.stockAddColumns = []
            formSpecList.map((item, index) => {
                let tags = item.tags
                if (tags.length > 0) {
                    let label = ''
                    label = this.getSelectLabel({
                        list: this.specificationList,
                        value: item.specification
                    })
                    this.stockAddColumns.push({
                        label,
                        value: item.specification
                    })
                }
            })
            this.stockAddColumns.forEach(item => {
                // 将筛选完的数据增加到 table 库存列表中
                this.stockColumns.push({
                    label: item.label,
                    key: item.value
                })
            })
            this.stockColumns.push(...this.stockColumnsDefault)
        },
        /**
         * 增加库存列表信息
         * @param {Number} specIndex - 商品规格索引值
         * @param {} newTagsValue - 新增的tagsValue
         */
        addStockList({ specIndex, newTagsValue }) {
            // let formSpecList = this.formValidate.specificationList
            if (this.tagsLen > 0) {
                this.addSpecTagStockData({ specIndex, newTagsValue })
            } else {
                this.resetStockHeader()
                this.resetStockData()
            }
        },
        /**
         * 根据商品属性规格的索引，和对应的tags的索引删除当前tag
         *
         * @param {Number} specIndex - 当前规格项目的索引值
         * @param {Number} tagIndex - 当前tags的索引值
         * @param {String} tagLabel - 属性值 -（根据属性值的唯一性删除对应的sku数据）
         */
        removeSpecTag({ specIndex, tagIndex, tagLabel }) {
            let formSpecList = this.formValidate.specificationList
            let tags = formSpecList[specIndex].tags
            tags.splice(tagIndex, 1)
            if (formSpecList[specIndex].tags.length <= 0) {
                // 如果当前属性的属性值的长度为零 则更新所有数据
                this.resetStockHeader()
                this.resetStockData()
            } else {
                this.removeSpecTagStockData({
                    specIndex,
                    tagIndex
                })
            }
        },
        /**
         * 增加 属性值 时  增加对应的数据到 stock data 指定的地方
         *
         */
        addSpecTagStockData({ specIndex, newTagsValue }) {
            let formSpecList = this.formValidate.specificationList
            let arrs = []
            formSpecList.forEach((item, index) => {
                // 计算新增的属性值和其他的属性值的合集 以获得新的 笛卡尔数据
                if (index === specIndex) {
                    arrs.push(newTagsValue)
                } else {
                    if (item.tags.length > 0) {
                        arrs.push(item.tags)
                    }
                }
            })
            let result = Descarte.descartes(arrs)
            if (specIndex <= 0) {
                // 如果所有为 0 直接 push
                result.forEach(item => {
                    this.formValidate.stockData.push(
                        this.pushStockData({ result: item })
                    )
                })
            } else {
                // 所有 > 0 计算当前组和个数推断出正确的索引值
                let nLoop = 1 // 计算循环的次数，相当于组
                let num = 1 // 计算每组新增的个数
                let startStockDataIndex = 1 // 计算第一组开始的索引
                let tagsLen = this.aTagsLen.length
                let newTagsValueLen = newTagsValue.length
                // let nTagsLen = this.aTagsLen.length
                for (let i = 0; i <= specIndex; i++) {
                    // 计算当前属性存在多少组
                    if (i > 0) {
                        nLoop *= this.aTagsLen[i - 1]
                    }
                }
                for (let i = specIndex + 1; i < tagsLen; i++) {
                    // 计算每组需要新增的个数
                    num *= this.aTagsLen[i]
                }
                num *= newTagsValueLen

                for (let i = specIndex; i < tagsLen; i++) {
                    // 计算第一组开始索引
                    startStockDataIndex *= this.aTagsLen[i]
                }
                let resultIndex = 0 // sku 新数据 索引
                for (let i = 1; i <= nLoop; i++) {
                    let stockDataIndex = startStockDataIndex * i + resultIndex
                    for (let j = 1; j <= num; j++) {
                        this.formValidate.stockData.splice(
                            stockDataIndex,
                            0,
                            this.pushStockData({
                                result: result[resultIndex]
                            })
                        )
                        stockDataIndex++
                        resultIndex++
                    }
                }
            }
            this.setComputedColumns() // 重新计算 合并列 和  每个属性的属性值的个数
        },
        /**
         * 删除 属性值 时  删除对应的 stock data 的数据
         *
         * @param {Number} specIndex - 当前属性规格的索引
         * @param {Number} tagIndex - 当前属性规格的属性值的索引
         */
        removeSpecTagStockData({ specIndex, tagIndex }) {
            let nLoop = 1 // 计算循环的次数，相当于组
            let num = 1 // 计算删除的个数
            let tagsLen = this.aTagsLen.length
            // let nTagsLen = this.aTagsLen.length
            for (let i = 0; i <= specIndex; i++) {
                // 计算当前属性存在多少组
                if (i > 0) {
                    nLoop *= this.aTagsLen[i - 1]
                }
            }
            for (let i = specIndex + 1; i < tagsLen; i++) {
                // 计算替换的个数
                num *= this.aTagsLen[i]
            }
            for (let i = 0; i < nLoop; i++) {
                let stockDataIndex = 0
                if (specIndex > 0) {
                    // 如果是大于第一条属性
                    // 开始的索引  等于    合并单元格前一个数据的值 * 当前组 + 当前属性索引 * 当前合并单元值
                    // 每删除一组数据是  需要 减去当前数据的个数 * 当前组   得到新的索引
                    stockDataIndex =
                        this.computedColumns[specIndex - 1] * i +
                        tagIndex * this.computedColumns[specIndex]
                    this.formValidate.stockData.splice(
                        stockDataIndex - i * num,
                        num
                    )
                } else {
                    // 如果是第一条属性  只需根据  开始的索引值和要删除的个数删除相应的数据即可
                    stockDataIndex = tagIndex * this.computedColumns[specIndex]
                    this.formValidate.stockData.splice(stockDataIndex, num)
                }
            }
            this.setComputedColumns() // 重新计算 合并列 和  每个属性的属性值的个数
        },
        /**
         * 编辑商品库存表格，当离开当前文本框焦点是更改其内容
         *
         * @param {Object} event - 当前文本框对象
         * @param {Object} params - 当前参数值
         */
        stockInputEnter({ event, params }) {
            if (event.keyCode === 13) {
                // keycode = 13 以监听键盘回车键
                // render或jsx不提供对应的enter事件需自己写逻辑实现
                this.stockData[params.index][params.column.key] =
                    event.target.value
            }
        },
        /**
         * 提交表单验证
         *
         * @param {String} formName - 表单名称
         */
        handleSubmit(formName) {
            return this.$refs[formName].validate(valid => {
                if (valid) {
                } else {
                    this.$Message.error('请将必填信息填写完整！')
                }
            })
        },
        changeFreight() {}
    },
    watch: {
        goodsCreateStep1(val, oldVal) {
            if (val.attr === 'specificationList') {
                this.formValidate.specificationList[val.specIndex].tags[
                    val.tagIndex
                ].image =
                    val.aPictureSel[0].img
            }

            if (val.attr === 'goodsImg') {
                this.formValidate.goodsImg.push(...val.aPictureSel)
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/theme/index';
.steps {
    width: 80%;
    margin: 0 auto;
    transform: translateX(70px);
    margin-top: 20px;
}
.step:hover {
    cursor: pointer;
}
.goods-create__con {
    margin-top: 30px;
    .row {
        background: @table-thead-bg;
    }
    .col-left {
        padding-top: 30px;
    }
    .col-right {
        padding: @gap;
        padding-top: 30px;
        border-left: 1px solid #fff;
    }
}
.specifition-card {
    .ivu-card-head {
        p {
            font-size: 13px;
            font-weight: normal;
            height: inherit;
            display: flex;
            justify-content: space-between;
            .card__icon-close {
                display: none;
                color: #aaa;
                cursor: pointer;
                &:hover {
                    color: @link-color;
                }
            }
            .ivu-checkbox-wrapper {
                margin-left: @gap;
            }
        }
    }
    &:hover .ivu-card-head .card__icon-close {
        display: initial;
    }
}
</style>